<template>
  <view>
    <!-- <my-search :bgcolor="'pink'" :radios="0"></my-search> -->
    <my-search @click="fSearchClick"></my-search>
    <view class="scroll-container">
      <scroll-view :style="{height: height+'px'}" scroll-y="true" class="scroll-left">
        <view @click="hadleActive(index)" :class="['item-left', index === active ? 'active' : '']" v-for="(item, index) in cateList" :key="index">{{item.cat_name}}</view>
      </scroll-view>
      <scroll-view :style="{height: height+'px'}" scroll-y="true" class="scroll-right" :scroll-top="scrollTop">
       <view v-for="(item, index) in titleList" :key="index" class="right-box">
          <view class="title">/{{item.cat_name}}/</view>
          <view class="detail-item">
            <view @click="goToGoodsList(item2)" class="detail" v-for="(item2,index2) in item.children" :key="index2">
              <image :src="item2.cat_icon"  mode="widthFix"></image>
              <text>{{item2.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view >
    </view>
  </view>
</template>

<script>
  import setBadge from '@/mixin/tabBarBadge.js'
  // uni.getSysmentInfoSync
  // 获得设备信息
  export default {
    mixins: [setBadge],
    data() {
      return {
        height: 0 ,
        cateList: [],
        active: 0,
        titleList: [],
        scrollTop: 0
      };
    },
    onLoad() {
      // uni.getSysmentInfoSync()
      // console.log(uni.getSystemInfoSync())
      this.height = uni.getSystemInfoSync().windowHeight - 50
      this.getCateList()
    },
    
    methods: {
      async getCateList() {
        const {data: {message}, statusCode} = await uni.$http.get('api/public/v1/categories')
        if(statusCode !== 200) {
          return uni.$showMsg()
        }
        this.titleList = message[0].children
        this.cateList = message
      },
      hadleActive(active) {
        this.active = active 
        this.titleList = this.cateList[active].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      goToGoodsList(item2) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item2.cat_id
        })
      },
      
      fSearchClick() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-container{
    display: flex;
    .scroll-left{
      width: 100px;
      .item-left{
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;
        &.active{
          position: relative;
          background-color: #fff;
          &::before{
            top:50%;
            transform: translateY(-50%);
            position: absolute;
            content:'';
            display: block;
            height: 30px;
            width:3px;
            color: #000;
            background-color: #c00000;
          }
        }
      }
    }
  }
    .scroll-right{
      .right-box{
        padding-top: 10px;
        background-color: #fff;
        .title{
          margin-bottom: 10px;
          text-align: center;
          font-weight: bold;
        }
        .detail-item{
          display: flex;
          flex-wrap: wrap;
          .detail{
            margin-bottom: 10px;
            width: 33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            image{
              width: 60px;
              height: 60px;
            }
            text{
              font-size: 12px
            }
          }
        }
      }
    }
</style>
